<template>
  <div class="draggable-container">
    <!-- <draggable
      v-model="internalItems"
      :options="dragOptions"
      @end="onDragEnd"
    >
      <div v-for="(item, index) in internalItems" :key="itemKey ? item[itemKey] : index" class="draggable-item">
        <div class="item-content">
          <slot name="item" :item="item">
            {{ item.text || item }}
          </slot>
        </div>
        <div class="handle">
          <slot name="handle">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path
                fill="currentColor"
                d="M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z"
              />
            </svg>
          </slot>
        </div>
      </div>
    </draggable> -->
  </div>
</template>

<script>
// import draggable from 'vuedraggable'

export default {
  name: 'DraggableList',
  components: {
    // draggable
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    itemKey: {
      type: String,
      default: 'id'
    },
    handle: {
      type: String,
      default: '.handle'
    }
  },
  data() {
    return {
      internalItems: []
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 150,
        handle: this.handle
      }
    }
  },
  mounted() {
    this.internalItems = [...this.value]
  },
  watch: {
    value(newVal) {
      this.internalItems = [...newVal]
    }
  },
  methods: {
    onDragEnd() {
      this.$emit('input', this.internalItems)
      this.$emit('change', this.internalItems)
    }
  }
}
</script>

<style scoped>
.draggable-container {
  width: 100%;
}

.draggable-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.draggable-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.item-content {
  flex: 1;
}

.handle {
  cursor: move;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 0 8px;
}

.handle:hover {
  opacity: 1;
}
</style>